﻿@using DevExtreme.NETCore.Demos.Models

@model IEnumerable<Order>

@(Html.DevExtreme().DataGrid<Order>()
    .ID("gridContainer")
    .ShowBorders(true)
    .DataSource(Model, new[] { "ID" })
    .ColumnChooser(c => c.Enabled(true))
    .LoadPanel(p => p.Enabled(true))
    .Columns(columns => {
        columns.AddFor(m => m.OrderNumber);

        columns.AddFor(m => m.OrderDate);

        columns.AddFor(m => m.Employee);

        columns.AddFor(m => m.CustomerStoreCity);

        columns.AddFor(m => m.CustomerStoreState)
            .GroupIndex(0);

        columns.AddFor(m => m.SaleAmount)
            .Alignment(HorizontalAlignment.Right)
            .Format(Format.Currency);
    })
    .OnToolbarPreparing("toolbar_preparing")
)

<script>
    function toolbar_preparing(e) {
        var dataGrid = e.component;

        e.toolbarOptions.items.unshift({
            location: "before",
            template: function() {
                return $("<div/>")
                    .addClass("informer")
                    .append(
                        $("<h2 />")
                            .addClass("count")
                            .text(getGroupCount("CustomerStoreState")),
                        $("<span />")
                            .addClass("name")
                            .text("Total Count")
                    );
            }
        }, {
            location: "before",
            widget: "dxSelectBox",
            options: {
                width: 200,
                items: [{
                    value: "CustomerStoreState",
                    text: "Grouping by State"
                }, {
                    value: "Employee",
                    text: "Grouping by Employee"
                }],
                displayExpr: "text",
                valueExpr: "value",
                value: "CustomerStoreState",
                onValueChanged: function(e) {
                    dataGrid.clearGrouping();
                    dataGrid.columnOption(e.value, "groupIndex", 0);
                    $(".informer .count").text(getGroupCount(e.value));
                }
            }
        }, {
            location: "before",
            widget: "dxButton",
            options: {
                text: "Collapse All",
                width: 136,
                onClick: function(e) {
                    var expanding = e.component.option("text") === "Expand All";
                    dataGrid.option("grouping.autoExpandAll", expanding);
                    e.component.option("text", expanding ? "Collapse All" : "Expand All");
                }
            }
        }, {
            location: "after",
            widget: "dxButton",
            options: {
                icon: "refresh",
                onClick: function() {
                    dataGrid.refresh();
                }
            }
        });
    }

    function getGroupCount(groupField) {
        var orders = [];

        $("#gridContainer").dxDataGrid("instance")
            .option("dataSource")
            .store
            .load()
            .done(function(data) {
                orders = data;
            });

        return DevExpress.data.query(orders)
            .groupBy(groupField)
            .toArray().length;
    }
</script>
